/*
 * @Author: xiehangyun 
 * @Date: 2025-02-21 18:59:31 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-22 11:08:40
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./graffitiTools.module.less";
import editorStore from "@/editorComponent/editorStore";
import { Button } from "antd";
import BrushSize from "./BrushSize/BrushSize";
import BrushType from "./BrushType/BrushType";
import BrushColor from "./BrushColor/BrushColor";
import graffitiEditor from "../graffitiEditor";
import utilsServer from "@/api/services/utilsServer";
import designEditor from "@/editorComponent/designEditor";

interface Iprops {
  children?: ReactNode
}

// 涂鸦工具栏
export default function GraffitiTools() {

  const dom = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
    if (dom.current) {
      dom.current.style.transform = `translate(calc(-50%),  calc(-40px) ) scale(${100 / editorStore.scale})`;
    }
  }, { delay: 30 }), []);

  const ok = async () => {
    const file = await graffitiEditor.exportContentAsImage();
    if (file) {
      const url = await utilsServer.uploadOss(file);
      const { x, y, width, height } = graffitiEditor.drawArea;
      const imgInstance = await designEditor.addImg("涂鸦", url);
      imgInstance.set({
        left: (x + width) / 2,
        top: (y + height) / 2,
        scaleX: 1,
        scaleY: 1,
      });
    }
    editorStore.setGraffiti(false);
  }

  //取消
  const cancel = () => {
    editorStore.setGraffiti(false);
  }

  return (
    <div
      ref={dom}
      className={styles.graffitiTools}
    >
      {/* 画笔类型 */}
      <BrushType />
      {/* 画笔大小 */}
      <BrushSize />
      {/* 画笔颜色 */}
      <BrushColor />
      &nbsp;
      <Button size="small" onClick={cancel} >取消</Button>
      &nbsp;
      <Button
        size="small"
        type="primary"
        onClick={ok}
      >确定</Button>
    </div>
  );
}